<template>
  <div class="tab-bar">
    <van-tabbar v-model="currentIndex" route active-color="#ff9854">
      <template v-for="(tabItem, index) in tabList" :key="index">
        <van-tabbar-item :to="tabItem.path">
          <span>{{ tabItem.title }}</span>
          <template #icon="props">
            <img :src="props.active ?
            getAssetURL(tabItem.activeIcon) :
            getAssetURL(tabItem.inactiveIcon)" alt="">
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
  <!-- 自己封装的 -->
  <!-- <div class="tab-bar">
    <template v-for="(tabItem, index) in tabList" :key="index">
      <div :class="['tab-bar-item', { active: currentIndex == index }]" @click="ItemClick(index, tabItem.path)"
        ref="tabItemRefs">
        <img :src="currentIndex == index ?
        getAssetURL(tabItem.activeIcon) :
        getAssetURL(tabItem.inactiveIcon)" alt="">
        <span>{{ tabItem.title }}</span>
      </div>

    </template>
  </div> -->
</template>

<script setup>
import { ref } from 'vue';
import tabList from "@/assets/data/tabbar.js"
import { getAssetURL } from "@/utils/load_assets.js"
import { useRouter } from 'vue-router';

let currentIndex = ref(0)
</script>

<style lang="less" scoped>
.tab-bar {
  // 局部定义一个变量：只针对tab-bar子元素生效
  --van-tabbar-item-icon-size: 28px !important;

  // 找到类，对类中的css属性写
  :deep(.van-tabbar--fixed) {
    border-top: 1px solid #333;
  }

  img {
    height: 26px;
  }
}
</style>